<template>
  <a-card :bordered="false" class="card-area">
    <a-row type="flex">
      <detail-list style="width: 100%" :col="2">
        <detail-list-item term="学号">{{ info.xh }}&nbsp;</detail-list-item>
        <detail-list-item term="姓名">{{ info.xm }}&nbsp;</detail-list-item>
        <detail-list-item term="性别">{{ info.xbmc }}&nbsp;</detail-list-item>
        <detail-list-item term="院系">{{ info.ssyxmc }}&nbsp;</detail-list-item>
        <detail-list-item term="专业">{{ info.sszymc }}&nbsp;</detail-list-item>
        <detail-list-item term="方向">{{ info.yjfxmc }}&nbsp;</detail-list-item>
        <detail-list-item term="学制">{{ info.xz }}&nbsp;</detail-list-item>
        <detail-list-item term="导师姓名">{{ info.dsxm }}&nbsp;</detail-list-item>
        <detail-list-item term="个人电话">{{ info.lxdh }}&nbsp;</detail-list-item>
        <detail-list-item term="审核状态">{{ info.shztmc }}&nbsp;</detail-list-item>
      </detail-list>
    </a-row>
    <a-form style="margin-top: 20px" :form="form" layout="vertical">
      <a-row :gutter="48">
        <a-col style="height: 93px" :md="12" :sm="24">
          <a-form-item selfUpdate label="拟实践类别" style="margin-bottom: 0">
            <a-form-item :style="{ display: 'inline-block', width: '50%' }">
              <a-select
                allowClear
                v-decorator="['nsjlbm',
                {
                  rules: [{ required: true , message: '请选择拟实践类别' }],
                }]"
                @change="nsjlbmChange"
              >
                <a-select-option v-for="i in TYPE0515" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item selfUpdate :style="{ display: 'inline-block', width: '50%' }">
              <a-input
                :disabled="!nsjlbqtRequire"
                v-decorator="['nsjlbqt',
              {
                rules: [{ required: nsjlbqtRequire , message: '请输入' }],
              }]"
                placeholder="当选择其他时需要输入"
              />
            </a-form-item>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item selfUpdate label="实践基地名称" style="margin-bottom: 0">
            <a-form-item selfUpdate :style="{ display: 'inline-block', width: '50%' }">
              <a-select
                allowClear
                v-decorator="['sjjdmc',
              {
                rules: [{ required: true , message: '请输入实践基地名称' }],
              }]"
                showSearch
                :filterOption="filterOption"
                @change="sjjdmcChange"
              >
                <a-select-option
                  v-for="(i, index) in unionBaseList"
                  :key="index"
                  :value="i.lhpyjdmc"
                >{{ i.lhpyjdmc }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item selfUpdate :style="{ display: 'inline-block', width: '50%' }">
              <a-input
                :disabled="!sjjdmc2Require"
                v-decorator="['sjjdmc2',
              {
                rules: [{ required: sjjdmc2Require , message: '请输入' }],
              }]"
                placeholder="当选择其他时需要输入"
              />
            </a-form-item>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item selfUpdate label="实践单位全称">
            <a-input
              v-decorator="['sjdwqc',
              {
                rules: [{ required: true , message: '请输入实践单位全称' }],
              }]"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item selfUpdate label="实践单位详细地址">
            <a-input
              style="width: 100%"
              v-decorator="['sjdwxxdz',
              {
                rules: [{ required: true , message: '请输入实践单位详细地址' }],
              }]"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item selfUpdate label="专业实践起止时间">
            <a-range-picker
              style="width: 100%"
              v-decorator="[
              'zysjqzsj',
              {
                rules: [{ required: true, message: '请选择起止时间!' }],
              }
            ]"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item selfUpdate label="实践单位指导教师姓名">
            <a-input
              v-decorator="['sjzdjsxm',
              {
                rules: [{ required: true , message: '请输入实践单位指导教师姓名' }],
              }]"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item selfUpdate label="专业技术职称">
            <a-input
              v-decorator="['zyjszc',
              {
                rules: [{ required: true , message: '请输入专业技术职称' }],
              }]"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item selfUpdate label="实践单位指导教师联系电话">
            <a-input
              v-decorator="['sjdwzdjslxdh',
              {
                rules: [{ required: true , message: '请输入实践单位指导教师联系电话' }],
              }]"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :md="12" :sm="24">
        <a-form-item selfUpdate label="拟实践内容（实践计划，实践方式，实践方法，实践目的等，300字）">
          <a-input
            type="textarea"
            placeholder="请输入拟实践内容，限定300字"
            v-decorator="[
                  'nsjnr',
                  {
                    rules: [{ required: true, message: '请输入拟实践内容' }],
                  }
                ]"
            maxlength="300"
            :autosize="{ minRows: 6, maxRows: 10 }"
          />
        </a-form-item>
      </a-row>

      <a-row style="text-align: center">
        <a-button @click="addApply" type="primary" v-hasPermission="'zysjsq:modify'">保存</a-button>
        <a-button style="margin-left: 10px;" @click="$router.back()">返回</a-button>
      </a-row>
    </a-form>
  </a-card>
</template>

<script>
  import DetailList from "~/tool/DetailList";
  import {mapState} from "vuex";

  const DetailListItem = DetailList.Item;

  export default {
  components: { DetailList, DetailListItem },
  computed: {
    ...mapState({
      TYPE0515: state => state.app["TYPE0515"]
    }),
    routerQuery() {
      return this.$route.query
    }
  },
  data() {
    return {
      form: this.$form.createForm(this),
      unionBaseList: [],
      id: null,
      nsjlbqtRequire: false,
      sjjdmc2Require: false,
      info: {}
    };
  },
  async created() {
    this.$store.dispatch("app/setDictionary", "TYPE0515");
    this.getInfo()
  },
  methods: {
    getInfo() {
      this.$api.degree.zysjsqInfo(this.routerQuery.id).then(async res => {
        if (res.data) {
          this.info = res.data
          this.id = res.data.id
          let { data } = await this.$api.base.unionBaseALl({yxm: this.info.ssyxm})
          this.unionBaseList = data;
          if (!this.unionBaseList.find(b => b.lhpyjdmc === res.data.sjjdmc)) {
            res.data.sjjdmc2 = res.data.sjjdmc
            res.data.sjjdmc = '其他'
          }
          this.form.setFieldsValue({
            ...res.data,
            zysjqzsj: [res.data.zysjkssj, res.data.zysjjssj]
          })
          this.nsjlbqtRequire = res.data.nsjlbm === '05'
        }
      })
    },
    filterOption(value, op) {
      return op.componentOptions.children[0].text.indexOf(value) !== -1
    },
    nsjlbmChange(e) {
      this.form.setFieldsValue({ nsjlbqt: '' })
      this.nsjlbqtRequire = e === '05'
    },
    sjjdmcChange(e) {
      this.form.setFieldsValue({ sjjdmc2: '' })
      this.sjjdmc2Require = e === '其他'
    },
    addApply() {
      this.form.validateFields((err, values) => {
        if (err) {
          return
        }
        let params = { ...values }
        params.zysjkssj = params.zysjqzsj[0].format('YYYY-MM-DD')
        params.zysjjssj = params.zysjqzsj[1].format('YYYY-MM-DD')
        delete params.zysjqzsj
        if (params.sjjdmc === '其他') {
          params.sjjdmc = params.sjjdmc2
        }
        this.$api.degree.zysjsqUpdate({ ...params, xh: this.info.xh, id: this.id }).then(res => {
          // this.getInfo()
          this.$message.success(res.msg)
          this.$router.back()
        })
      })
    }
  }
};
</script>

<style>
</style>
